html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: black;

  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  position: relative;
  width: 120px;
  height: 120px;
  background: #ff0000;
  margin: 200px auto;
  /* 盒子旋转45度 */
  transform: rotate(45deg) scale(0.9);
  box-shadow: 0 0 30px 5px rgba(255, 0, 0, 0.7);
}

.box::after,
.box::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  background-color: #ff0000;
  border-radius: 50%;
  box-shadow: 0 0 30px 5px rgba(255, 0, 0, 0.7);
}
.box::after {
  left: -68px;
}
.box::before {
  top: -68px;
}


.box2{
  height: 250px;
  display: flex;
}
.love{
  width: 20px;
  height: 20px;
  margin: 10px;
  border-radius: 10px;
}
.Line1{
  background: red;
  animation: Line1 4s 0s infinite;
}
.Line2{
  background: blue;
  animation: Line2 4s 0.2s infinite;
}
.Line3{
  background: pink;
  animation: Line3 4s 0.4s infinite;
}
.Line4{
  background: rebeccapurple;
  animation: Line4 4s 0.6s infinite;
}
.Line5{
  background: powderblue;
  animation: Line5 4s 1s infinite;
}
.Line6{
  background: yellow;
  animation: Line4 4s 1.2s infinite;
}
.Line7{
  background: yellowgreen;
  animation: Line3 4s 1.4s infinite;
}
.Line8{
  background: blue;
  animation: Line2 4s 1.6s infinite;
}
.Line9{
  background: red;
  animation: Line1 4s 1.8s infinite;
}

@keyframes Line1 {
  30%,50%{
      height: 75px;
      transform: translateY(-30px);
  }
  70%,100%{
      height: 0px;
      transform: translateY(0px);
  }
}
@keyframes Line2 {
  30%,50%{
      height: 156px;
      transform: translateY(-60px);
  }
  70%,100%{
      height: 0px;
      transform: translateY(0px);
  }
}
@keyframes Line3 {
  30%,50%{
      height: 200px;
      transform: translateY(-75px);
  }
  70%,100%{
      height: 0px;
      transform: translateY(0px);
  }
}
@keyframes Line4 {
  30%,50%{
      height: 225px;
      transform: translateY(-60px);
  }
  70%,100%{
      height: 0px;
      transform: translateY(0px);
  }
}
@keyframes Line5 {
  30%,50%{
      height: 250px;
      transform: translateY(-45px);
  }
  70%,100%{
      height: 0px;
      transform: translateY(0px);
  }
}